import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入 postcss-px-to-viewport 插件
import pxToViewport from 'postcss-px-to-viewport';
export default defineConfig({
  base: './', // 服务器子目录
  plugins: [vue()],
  server: {
    port: 8000,
    hmr: true,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
        target: 'http://192.168.1.23:8080/', //这里填入你要请求的接口的前缀
        // ws: false,//代理websocked
        changeOrigin: true, //是否跨域
        // secure: true,  //是否https接口
        // logLevel: 'debug',
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        // 这里可以配置LESS的全局变量等
      }
    },
    postcss: {
      plugins: [
        pxToViewport({
          unitToConvert: 'px', // 要转换的单位
          viewportWidth: 375, // 设计稿宽度
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ['*'], // 指定转换那些属性，* 表示全部
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: [], // 要忽略的选择器
          minPixelValue: 1, // 最小的转换数值
          mediaQuery: false, // 是否在媒体查询中也转换
          replace: true, // 是否直接更换属性值
          exclude: [], // 要忽略的文件
        }),
      ]
    }
  },
  presets: [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "49",
          "ios": "10"
        }
      }
    ]
  ]
})
